<head>
    <meta charset="utf-8" />
    <title>组合选择器优先级</title>
    <!-- 
        一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：
            ID：选择器中包含 ID 选择器则百位得一分。
            类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
            元素：选择器中包含元素、伪元素选择器则个位得一分。 
            
    -->
    <style>
        /*1个id选择符 1个元素选择符 1个类选择符  1-1-1*/
        /* div #box-second-id .box-three-class {
            color: red;
        } */

        /*2个id选择符 1个元素选择符   2-0-1*/
        div #box-second-id #box-three-id {
            color: red;
        }

        /*2个id选择符 1个元素选择符   2-0-1*/
        div #box-second-id #box-three-id {
            color: blue;
        }

        /*最后在浏览器上面显示 blue 颜色的文字*/
    </style>

<body>
    <div class="box-first-class" id="box-first-id">
        <div class="box-second-class" id="box-second-id">
            <div class="box-three-class" id="box-three-id">
                我是一个p标签
            </div>
        </div>
    </div>
</body>

</html>